<template>
  <div class="bg-light">
    <div class="container-title nmb">商品信息</div>
    <div class="container-header">
      <SearchSale ref="search" @onSearchData="onChoiceTab" />
    </div>
    <div>
      <table cellspacing="0" class="table">
        <thead>
          <tr>
            <th width="20" />
            <!-- 普通查看 -->
            <template v-if="type !== 'FACTORY_ACTIVITY'">
              <th v-for="item in listData.columns" :key="item.id" :width="item.width" :align="item.align">{{ item.title }}</th>
            </template>
            <!-- 工厂特价查看 -->
            <template v-else>
              <th v-for="item in bargainListData.columns" :key="item.id" :width="item.width" :align="item.align">{{ item.title }}</th>
            </template>
          </tr>
        </thead>
      </table>
    </div>
    <div class="outer">
      <div class="inner">
        <div class="fixedHegiht">
          <table cellspacing="0" class="table">
            <!-- 普通查看 -->
            <template v-if="type !== 'FACTORY_ACTIVITY'">
              <tbody v-for="item in list" :key="item.id">
                <tr>
                  <td width="20">
                    <Icon v-if="item.showChildren" type="ios-arrow-down" size="20" class="ml cursor" @click="onShowChild(item)" />
                    <Icon v-if="item.children && item.children.length && !item.showChildren" type="ios-arrow-forward" size="20" class="ml cursor" @click="onShowChild(item)" />
                  </td>
                  <td width="150">{{ item.code }}</td>
                  <td width="150">{{ item.skuCode }}</td>
                  <td width="300">
                    <div class="flexLeft">
                      <!-- <img :src="item.img" alt=""> -->
                      <div class="e2">{{ item.name }}</div>
                    </div>
                  </td>
                  <td class="font-red">{{ getMinMaxValue(item.children, {index: 'marketPrice'}) }}</td>
                  <td class="font-red" width="150">{{ item.promotionPrice }}</td>
                </tr>
                <template v-if="item.children && item.children.length">
                  <tr v-for="child in item.children" v-show="item.showChildren" :key="child.id">
                    <td />
                    <td>-</td>
                    <td>{{ child.skuCode }}</td>
                    <td>
                      <div class="flexLeft">
                        <!-- <img :src="item.img" alt=""> -->
                        <div class="e2">{{ child.name }}</div>
                      </div>
                    </td>
                    <td class="font-red">{{ child.marketPrice | currency(true) }}</td>
                    <td class="font-red">{{ child.promotionPrice | currency(true) }}</td>
                  </tr>
                </template>
              </tbody>
              <Loader :status="status" @refresh="getDetailData" />
            </template>
            <!-- 工厂特价查看 -->
            <template v-else>
              <tbody v-for="item in list" :key="item.id">
                <tr>
                  <td width="20">
                    <Icon v-if="item.showChildren" type="ios-arrow-down" size="20" class="ml cursor" @click="onShowChild(item)" />
                    <Icon v-if="item.children && item.children.length && !item.showChildren" type="ios-arrow-forward" size="20" class="ml cursor" @click="onShowChild(item)" />
                  </td>
                  <td width="150">{{ item.code }}</td>
                  <td width="150">{{ item.skuCode }}</td>
                  <td width="300">
                    <div class="flexLeft">
                      <!-- <img :src="item.img" alt=""> -->
                      <div class="e2">{{ item.name }}</div>
                    </div>
                  </td>
                  <td class="font-red">{{ item.marketPrice }}</td>
                  <td class="font-red" width="150">{{ item.promotionPrice }}</td>
                  <td class="font-red" width="150">--</td>
                  <td class="font-red" width="150">--</td>
                  <td class="font-red" width="150">--</td>
                  <td class="font-red" width="150">--</td>
                </tr>
                <template v-if="item.children && item.children.length">
                  <tr v-for="child in item.children" v-show="item.showChildren" :key="child.id">
                    <td />
                    <td>-</td>
                    <td>{{ child.skuCode }}</td>
                    <td>
                      <div class="flexLeft">
                        <!-- <img :src="item.img" alt=""> -->
                        <div class="e2">{{ child.name }}</div>
                      </div>
                    </td>
                    <td class="font-red">{{ child.marketPrice | currency(true) }}</td>
                    <td class="font-red" width="150">{{ child.promotionPrice }}</td>
                    <td class="font-red" width="150">{{ child.activityFactoryGiftDTO && child.activityFactoryGiftDTO.giftPoint }}</td>
                    <td class="font-red" width="150">{{ child.activityFactoryGiftDTO && child.activityFactoryGiftDTO.giftRebate }}</td>
                    <td class="font-red" width="150">{{ child.activityFactoryGiftDTO && child.activityFactoryGiftDTO.giftCouponName }}</td>
                    <td class="font-red" width="150">{{ child.sellOutQuantity }}</td>
                  </tr>
                </template>
              </tbody>
            </template>
          </table>
        </div>
      </div>
    </div>
    <div class="pager">
      <Page
        :total="totalItem"
        :current="currentPage"
        :page-size="pageSize"
        show-sizer
        :transfer="true"
        placement="top"
        @on-change="onPageChange"
        @on-page-size-change="onPageSizeChange"
      />
    </div>
  </div>
</template>
<script>
import listData from './MianProductData'
import bargainListData from './BaigainProductData'
import SearchSale from '@/views/sales/common/SearchSale'
import { getMinValue, getMaxValue } from '@/views/sales/common/TableSaleMethods'
import { preFixPath, clearEmpty } from '@/util'
export default {
  components: {
    SearchSale
  },
  filters: {
    filterCoupon (val) {
      if (!val) {
        return '没选优惠券'
      } else {
        this.bargainCouponsData.forEach(item => {
          if (item.id == val) {
            return item.couponName
          }
        })
      }
    }
  },
  props: {
    // list: {
    //   type: Array
    // },
    type: '',
    bargainCouponsData: ''
  },
  data () {
    return {
      id: this.$route.query.id || '',
      listData: listData,
      bargainListData: bargainListData,
      totalItem: 1,
      pageSize: window.$pageSize,
      currentPage: 1,
      list: [],
      status: 'pass'
    }
  },
  mounted () {
    let self = this
    this.$store.dispatch('getGiftCouponList').then(res => {
      res.forEach(item => {
        self.$store.state.fullReturnSale.FullreturnForm.giftCoupon[item.id] = item.couponName
      })
      this.getSkuPage()
    })
    // this.$store.dispatch('getCouponsData')
  },
  methods: {
    onChoiceTab () {
      this.currentPage = 1
      this.pageSize = 20
      this.getSkuPage()
    },
    getMinMaxValue (param, object) {
      return `[${getMinValue(param, object)}-${getMaxValue(param, object)}]`
    },
    onPageChange (val) {
      this.currentPage = Number(val)
      let param = {
        size: this.pageSize,
        current: this.currentPage
      }
      this.getSkuPage()
    },
    onPageSizeChange (val) {
      this.pageSize = Number(val)
      let param = {
        size: this.pageSize,
        current: this.currentPage
      }
      this.getSkuPage()
    },
    getSkuPage (param) {
      let self = this
      self.status = 'loading'
      let params = {
        activityId: this.id,
        current: this.currentPage,
        size: this.pageSize,
        storeCategoryId: this.$refs.search.searchForm.ownerCategoryId,
        productName: this.$refs.search.searchForm.keyword,
        productBrandId: this.$refs.search.searchForm.brandId,
        tireFigure: this.$refs.search.searchForm.tireFigure,
        tireRim: this.$refs.search.searchForm.tireRim
      }
      params = clearEmpty(params)
      return new Promise((resolve, reject) => {
        this.$ajaxGet(`/activity/sku/page`, params).then(data => {
          this.list = (data.records || []).map(item => {
            let target = {
              code: item.productSn,
              skuCode: '-',
              name: item.productName,
              img: preFixPath + item.productPrimaryImg,
              marketPrice: '',
              showChildren: false,
              children: (item.skuList || []).map(child => {
                let childTarget = {
                  code: child.productSn,
                  skuCode: child.skuSn,
                  name: item.productName,
                  img: preFixPath + child.productPrimaryImg,
                  marketPrice: child.originalPrice,
                  promotionPrice: child.promotionPrice
                }
                // childTarget.promotionPrice = '--'
                if (this.activeType === 8) {
                  childTarget.activityFactoryGiftDTO = child.activityFactoryGiftDTO
                  childTarget.sellOutQuantity = child.sellOutQuantity
                  childTarget.promotionPrice = child.promotionPrice
                }
                return childTarget
              })
            }
            if (this.activeType === 3) {
              target.promotionPrice = '[' + item.minPromotionPrice + '~' + item.maxPromotionPrice + ']'
            } else {
              target.promotionPrice = '--'
            }
            return target
          })
          self.totalItem = Number(data.total)
          // let self = param.sel
          self.status = 'pass'
          self.currentPage = Number(data.current)
          self.pageSize = Number(data.size)
          resolve(data)
        })
      })
    },
    onShowChild (item) {
      item.showChildren = !item.showChildren
    }
  }
}
</script>

